<template>
    <div class="container">
        <HeadCopm></HeadCopm>
        <div class="box1">
            <h2 class="title">气态巨行星</h2>
            <div class="content-box-1">
                <div class="left">
                    <img src="@/assets/detail5/detail5-5.jpg" alt="">
                </div>
                <div class="right">
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    <br>
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                </div>
            </div>
            <h2 class="title"></h2>
        </div>
        <div class="box2">
            <div class="left">
                <div class="block"></div>
                <div class="img-box">
                    <img src="../assets/detail5/detail5-1.jpg" alt="">
                </div>
            </div>
            <div class="right">
                <h1 class="title">木星（Jupiter）</h1>
                <div class="text">
                    水星，英文名为Mercury，是太阳系中离太阳最近的一颗行星。
                    从地球表面观测水星时，其颜色总是呈灰黑色。中国的阴阳五行理论认
                    为，水元素属黑，所以古人将其命名为水星。而Mercury这一词源自于
                    罗马神话中的信使之神--墨丘利(Mercurius)，主要负责为诸神送情报之
                    类的，是神话里面最能跑腿的，水星距离太阳最近，因此运行速
                    度也快，故以信使之神的名字来命名水星。
                    <br>
                    水星的温度文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区。
                    <br>
                    水星的表面覆盖着数以万计的撞击坑。文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区
                </div>
            </div>
        </div>
        <div class="box6 flex-box">
            <div class="left">
                <div class="line"></div>
                <p class="text">
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                </p>
            </div>
            <div class="right">
                <img src="../assets/detail5/detail5-6.jpg" alt="">
            </div>
        </div>
        <div class="box7 flex-box">
            <div class="left">
                <img src="../assets/detail5/detail5-7.jpg" alt="">
                <img src="../assets/detail5/detail5-8.jpg" alt="">
            </div>
            <div class="right">
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
            </div>
        </div>
        <div class="box5">
            <div class="left">
                <div class="block"></div>
                <div class="img-box">
                    <img src="../assets/detail5/detail5-2.jpg" alt="">
                </div>
            </div>
            <div class="right">
                <h1 class="title">土星（Saturn）</h1>
                <div class="text">
                    金星，英文名为Venus，金星是太阳的第二大行星，也是第六大行星。
                    它是我们太阳系中最热的行星。
                    <br>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区。
                    <br>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区立字区立字区立字区立字区
                    立字区立字区立字区立字区立字区立字
                    <br>
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区。
                    <br>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区。
                </div>
            </div>
        </div>
        <div class="box3 flex-box">
            <div class="left">
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            </div>
            <div class="right">
                <img src="../assets/detail5/detail5-10.jpg" alt="">
                <img src="../assets/detail5/detail5-9.jpg" alt="">
            </div>
        </div>
        <div class="box4 flex-box">
            <div class="img">
                <img src="../assets/detail5/detail5-4.jpg" alt="">
            </div>
            <div class="text">
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            </div>
            <div class="img">
                <img src="../assets/detail5/detail5-3.jpg" alt="">
            </div>
        </div>
        <div class="box8">
            <div class="left">
                <div class="block"></div>
                <div class="img-box">
                    <img src="../assets/detail5/detail5-11.jpg" alt="">
                </div>
            </div>
            <div class="right">
                <h1 class="title">天王星（Uranus）</h1>
                <div class="text">
                    地球，英文名为Earth，我们的母星--是太阳的第三颗行星，也是第
                    五大行星。这是我们所知道的唯一有生物居住的地方。
                    <br>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区。
                    <br>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区。
                    <br>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区。
                </div>
            </div>
        </div>
        <div class="box6 flex-box">
            <div class="left">
                <div class="line"></div>
                <p class="text">
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                </p>
            </div>
            <div class="right">
                <img src="../assets/detail5/detail5-12.jpg" alt="">
            </div>
        </div>
        <div class="box9 flex-box">
            <div class="left">
                <img src="../assets/detail5/detail5-13.jpg" alt="">
                <img src="../assets/detail5/detail5-14.jpg" alt="">
            </div>
            <div class="right">
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
            </div>
        </div>
        <div class="box11">
            <div class="left">
                <div class="block"></div>
                <div class="img-box">
                    <img src="../assets/detail5/detail5-15.jpg" alt="">
                </div>
            </div>
            <div class="right">
                <h1 class="title">海王星（Neptune）</h1>
                <div class="text">
                    火星，英文名为Mars，是太阳的第四大行星，也是第七大行星。这是
                    我们所知道的唯一一个完全由机器人居住的星球。
                    <br>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区。
                    <br>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区。
                    <br>
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字
                    区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区。
                </div>
            </div>
        </div>
        <div class="box3 flex-box">
            <div class="left">
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            </div>
            <div class="right">
                <img src="../assets/detail5/detail5-16.jpg" alt="">
                <img src="../assets/detail5/detail5-17.jpg" alt="">
            </div>
        </div>
        <div class="box6 flex-box">
            <div class="left">
                <p class="text">
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                </p>
            </div>
            <div class="right">
                <img src="../assets/detail5/detail5-18.jpg" alt="">
            </div>
        </div>
        <div class="box14">
            <h1>其他一些气态巨行星</h1>
            <div class="img-box">
                <img src="../assets/detail5/detail5-19.jpg" alt="">
                <img src="../assets/detail5/detail5-20.jpg" alt="">
                <img src="../assets/detail5/detail5-21.jpg" alt="">
            </div>
        </div>
        <Footer :text="text"></Footer>
    </div>
</template>
<script>
import HeadCopm from "@/components/HeadComp.vue"
import Footer from "@/components/Fotter.vue"
export default {
    name: "Detail5",
    components: {
        HeadCopm,
        Footer
    },
    data() {
        return {
            text: {
                chinese: "你看到的每颗星星，都是泯灭的星球在化万年前发出的光线，穿过宇宙的空间时间，投上视网膜的倒反光斑。",
                english: "Every star you gaze upon is a testament to the celestial bodies that perished eons ago. Their light, a beacon from the depths of time, traverses the cosmos to grace your retinas with a mirrored glow."
            }
        }
    },
    methods: {
        toDetail() {

        },
    },
    created() {
        
    },
    computed: {
        
    }
}
</script>
<style lang="scss" scoped>
.container {
    text-align: left;
    .box1 {
        padding: 40px 0 20px;
        .title {
            width: calc(100% - 26vw);
            margin: auto;
            padding-bottom: 10px;
            border-bottom: 2px solid #C4C4C4;
            text-align: center;
        }
        .left {
            width: 43%;
            border: 1px solid #000;
            display: flex;
            flex-wrap: wrap;
            img {
                width: 100%;
                object-fit: contain;
            }
        }
        .right {
            width: 50%;
            text-align: left;
        }
        
    }
    .box2,
    .box5,
    .box8,
    .box11 {
        padding-top: 70px;
        display: flex;
        overflow: hidden;
        .left {
            width: 48%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            .block {
                width: 42%;
                aspect-ratio: 1/2.4;
                background-color: #C4C4C4;
                position: relative;
                z-index: 1;
                left: 0;
                bottom: 30px;
            }
            .img-box {
                width: 65%;
                margin: 75px 0 0 25%;
                position: absolute;
                z-index: 2;
                img {
                    width: 100%;
                    aspect-ratio: 1/1;
                }
            }
        }
        .right {
            padding-top: 40px;
            width: 52%;
            box-sizing: border-box;
            h1 {
                text-align: left;
            }
            .text {
                padding: 110px 180px 0 70px;
                text-align: left;
            }
        }
    }
    .box3 {
        .left {
            width: 45%;
            text-align: left;
        }
        .right {
            width: 45%;
            display: flex;
            justify-content: space-between;
            height: fit-content;
            img {
                width: 45%;
                aspect-ratio: 1;
            }
        }
    }
    .box4 {
        .text {
            width: 40%;
            text-align: left;
        }
        .img {
            width: 25%;
            img {
                width: 100%;
                aspect-ratio: 0.75;
            }
        }
    }
    .box6 {
        .left {
            width: 45%;
            .line {
                border-bottom: 2px solid #737373;
                margin-bottom: 20px;
            }
        }
        .right {
            width: 45%;
            img {
                width: 100%;
            }
        }
    }
    .box7,
    .box9 {
       .left {
            width: 50%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            img {
                width: 45%;
                aspect-ratio: 1/1;
            }
       }
       .right {
            width: 45%;
       }
    }
    .box14 {
        padding-bottom: 30px;
        h1 {
            text-align: center;
            padding: 60px 0px 70px;
        }
        .img-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            img {
                width: 31%;
                object-fit: contain;
            }
        }
    }
    .content-box-1 {
        width: 100%;
        padding: 50px 7vw;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
    }
    .flex-box {
        padding: 40px 7vw 20px;
        display: flex;
        justify-content: space-between;
    }
}
</style>